<template>
	<view class="container" :style="{paddingTop: statusBarHeight + 'px', background: 'linear-gradient(to bottom, #FF2F3A 0%, #FE4650 '+ (statusBarHeight + 44)+'px ,#F8F8F8  672rpx ,  #F8F8F8 100%)'}">
		<view style="position: fixed; top: 0; left: 0; width: 100vw; background: linear-gradient(to bottom, #FF2F3A 0% ,  #FE4650 100%);;z-index: 10;" :style="{paddingTop: statusBarHeight + 44 + 'px'}">
		</view>
		<uni-nav-bar title="申请填表" :border="false" left-icon="left"  background-color="transparent" fixed color="#fff" class="nav_bar" @clickLeft="back" ></uni-nav-bar>
		<view class="center">
			<uni-forms ref="form" :modelValue="formData" label-width="100">
				<uni-forms-item label="申请人" name="name">
					<input type="text" v-model="formData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="联系方式" name="mobile">
					<input type="text" v-model="formData.mobile" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="申请身份" name="mobile">
					<input type="text" :value="typeList[type]" placeholder="请输入手机号" readonly/>
				</uni-forms-item>
				<uni-forms-item label="申请门店" name="shop_id" class="last">
						<picker @change="changeShop" :value="index" :range="shopList" :range-key="'shopname'">
							<view style="text-align: right;line-height: 36px;position: relative;padding-right: 30rpx;">
								{{shopList[index].shopname||'请选择门店'}}
								<image src="/static/right.png" mode="widthFix" style="width: 20rpx;height: 20rpx;margin-left: 10rpx;position: absolute;right: 0;top: 50%;transform: translateY(-50%);"></image>
							</view>
						</picker>
				</uni-forms-item>
				
			</uni-forms>
		</view>
		<button class="button" @click="submit">提交申请</button>
	</view>
</template>

<script>
	import {getshoponline,saveCoperInfo} from '../../../api/api.js'
	export default {
		data() {
			return {
				statusBarHeight:'',
				type:'',
				typeList:{
					'CooperationMenDianFuZeRen':'门店负责人',
					'CooperationChuangLian':'联创',
					'CooperationHeHuoRen':'合伙人',
					'CooperationDaiLi':'代理',
					'CooperationHuiYuan':'会员',
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},{
							validateFunction: function(rule, value, data, callback) {
								const nameReg = (
									/^[\u4e00-\u9fa5]{2,5}$/
								); //2~5位中文字符
								if (!nameReg.test(value)) {
									callback('姓名格式不正确，请重新填写')
									}
								}
							},
						]
					},
					// 对email字段进行必填验证
					mobile: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								const iphoneReg = (
									/^(13[0-9]|14[1579]|15[0-3,5-9]|16[6]|17[0123456789]|18[0-9]|19[89])\d{8}$/
								); //手机号码
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
							}
						},
						]
					}
				},
				formData:{},
				index:0,
				shopList:[{shopname:''}],
				typeToNumber:{
					'CooperationMenDianFuZeRen':5,
					'CooperationChuangLian':4,
					'CooperationHeHuoRen':3,
					'CooperationDaiLi':2,
					'CooperationHuiYuan':1
				},
				shop_id:''
			};
		},
		onLoad(e) {
			this.type = e.type
			if(e.shop_id){
				this.shop_id = e.shop_id
			}
			this.getshoponline()
			this.GetStatusBarHeight();
		},
		onReady(){
			this.$nextTick(() => {  
			    this.$refs.form.setRules(this.rules);
			});  
		},
		methods:{
			//获取状态栏的高度
			GetStatusBarHeight() {
			    let that = this;
			       wx.getSystemInfo({
			        success: function (res) {
			            that.statusBarHeight = res.statusBarHeight;
			        },
			    });
			},
			back(){
				uni.navigateBack()
			},
			getshoponline(){
				getshoponline().then(res=>{
					this.shopList=res.data.data
					if(this.shop_id && this.shop_id != '') {
						this.index = this.shopList.findIndex(item=>item.id==this.shop_id)
						console.log(this.shopList, this.shop_id,this.index)
						if(this.index <= -1){
							this.index = 0
						}
					}else{this.index===0}
					this.$set(this.formData,'shop_id',this.shopList[this.index].id);
				})
			},
			changeShop(e){
				this.index = e.detail.value
				this.$set(this.formData,'shop_id',this.shopList[this.index].id);
			},
			submit(){
				this.$refs.form.validate().then(res=>{
					this.$set(this.formData,'mobile','');
					this.$set(this.formData,'name','');
					const params = {
						...res,
						apply_type:this.typeToNumber[this.type]
					}
					saveCoperInfo(params).then(res=>{
						console.log('res',res)
						uni.redirectTo({
							url: '/pages/my/myApplyProgress/myApplyProgress'
						});
						// uni.showToast({
						// 	title: '提交成功',
						// 	icon:'success'
						// });
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	width: 100%;
	background: linear-gradient(to bottom, #FF2F3A 0% ,#F8F8F8  672rpx ,  #F8F8F8 100%);
	padding: 0 24rpx;
	padding-top: var(--status-bar-height);
	font-family: PingFangSC-Semibold, PingFang SC;
}
.center {
	background-color: #fff;
	padding: 48rpx 34rpx;
	border-radius: 16rpx;
	margin-top: 24rpx;
	/deep/ .uni-forms-item {
		background-color: #F8F8F8;
		height: 100rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 48rpx;
		margin-bottom: 50rpx;
		input {
			text-align: right;
			height: 100%;
		}
	}
	/deep/ .last {
		margin-bottom: 0;
	}
}
/deep/ .uni-forms-item__error {
	left: unset;
	right: 0;
}
.button {
	margin-top: 48rpx;
	height: 88rpx;
	background: linear-gradient(90deg, #FF4050 0%, #FA2C1E 100%);
	border-radius: 44rpx;
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}

</style>
